/*
qstream.css — question stream
The question and its answer preview (best / your answer) share ONE card.
*/

/* ---------------------------------------------------------------------
   Canvas — on the Gask stream page the white cards sit on the theme's
   very light page background, so each card reads as its own surface
   instead of blending into the page. Scoped to the page shell
   (.qstream-page) so a stream embedded elsewhere (Profile tab,
   Following page, search results) keeps its host page background.
   --------------------------------------------------------------------- */
body:has(.qstream-page) {
    background-color: var(--color-bg-page);
}

.qstream-item {
    margin-bottom: 1rem;
}

.qstream-item:first-child {
    margin-top: 0.5rem;
}

.qstream-card {
    /* keep the attached answer inside the rounded card corners */
    overflow: hidden;
    margin-bottom: 0;
    /* a touch more definition than the default card hairline, so the
       white surface separates cleanly from the light canvas */
    border-color: var(--color-border);
}

.qstream-card--unanswered {
    background: var(--color-bg-surface);
}

/* Title and the counters share one line, so every card is balanced
   whether or not the question carries tags or images. */
.qstream-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.qstream-card__head > a {
    flex: 1 1 auto;
    min-width: 0;
}

.qstream-card__head .qstream-metrics {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   Title — the strongest element of the card.
   --------------------------------------------------------------------- */
.qstream-card__title {
    font-size: clamp(1.06rem, 0.5vw + 0.95rem, 1.24rem);
    line-height: 1.32;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-main);
}

.qstream-card__badge {
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Tags — compact, softly tinted pills instead of one outlined pill per
   tag, so the row reads as a quiet filter set rather than a menu.
   --------------------------------------------------------------------- */
.qstream-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.qstream-card__tags .ajus-tag {
    padding: 0.2rem 0.62rem;
    border-color: transparent;
    border-radius: var(--radius-pill);
    background: var(--color-bg-surface-soft);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.qstream-card__tags .ajus-tag-link:hover .ajus-tag,
.qstream-card__tags .ajus-tag-link:focus .ajus-tag {
    background: var(--color-bg-primary-soft);
    border-color: transparent;
    color: var(--color-text-primary);
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   Metrics — quiet counters, right-aligned: neutral by default, green
   once the question carries at least one answer.
   --------------------------------------------------------------------- */
.qstream-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin-left: auto;
    white-space: nowrap;
}

.qstream-metrics__link {
    display: block;
    flex: 0 0 auto;
    text-decoration: none !important;
    color: inherit;
}

.qstream-metrics__link:hover,
.qstream-metrics__link:focus {
    text-decoration: none !important;
    color: inherit;
}

/* the theme's metric label hard-sets its own colour — align it with the
   answered / neutral state of the tile it sits in */
.qstream-metrics .ajus-metric-success .ajus-ui-metric-label {
    color: var(--color-success);
}

.qstream-card__secondary-cta {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    border-color: var(--color-border-soft);
}

.qstream-card__cta {
    margin-top: 0.05rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

.qstream-card__mobile-metric-link {
    text-decoration: none !important;
}

.qstream-card__mobile-metric-link:hover {
    text-decoration: none !important;
}

/* ---------------------------------------------------------------------
   Attached answer preview — a quiet, inset block inside the question card.
   Just a hairline divider, a compact label and the answer text: no fill,
   no accent bar, so it stays part of the question without shouting.
   The text is clamped to three lines; "Read more" keeps it complete.
   --------------------------------------------------------------------- */
.qstream-answer {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border-soft);
}

.qstream-answer__head {
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.4;
}

.qstream-answer__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-success);
}

.qstream-answer__label i {
    margin-right: 0.32rem;
    font-size: 0.72rem;
}

.qstream-answer--user .qstream-answer__label {
    color: var(--color-primary);
}

.qstream-answer__author {
    color: var(--color-text-muted);
}

.qstream-answer__author::before {
    content: " · ";
    color: var(--color-text-soft);
}

.qstream-answer__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    /* darker than the surrounding muted text so the preview stays readable */
    color: color-mix(in srgb, var(--color-text-main) 82%, var(--color-text-muted));
}

.qstream-answer__more {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.qstream-answer__more:hover {
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    .qstream-answer {
        margin-top: 0.7rem;
        padding-top: 0.7rem;
    }
}